Improve repository listing page responsiveness for mobile devices #242
+43
−37
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
@anuja12mishra is attempting to deploy a commit to the Max Programming's projects Team on Vercel. A member of the Team first needs to authorize it. |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Hey nice work @anuja12mishra 
Also I noticed the navbar overflows on some screens. Would be nice if you fixed that too |
max-programming
requested changes
Oct 9, 2025
|
@max-programming, |
max-programming
requested changes
Oct 9, 2025
There was a problem hiding this comment.
Here's the build error
21:37:24.387 > hacktoberfest-projects@0.1.0 build /vercel/path0
21:37:24.387 > next build
21:37:24.387
21:37:25.187 ▲ Next.js 15.4.5
21:37:25.188 - Experiments (use with caution):
21:37:25.188 ✓ viewTransition
21:37:25.188
21:37:25.247 Creating an optimized production build ...
21:37:34.151 Failed to compile.
21:37:34.151
21:37:34.151 ./src/app/(public)/_components/hero.tsx
21:37:34.151 Error: �[31mx�[0m You're importing a component that needs `useRouter`. This React Hook only works in a Client Component. To fix, mark the file (or its parent) with the `"use client"` directive.
21:37:34.151 �[31m|�[0m
21:37:34.151 �[31m|�[0m Learn more: https://nextjs.org/docs/app/api-reference/directives/use-client
21:37:34.151 �[31m|�[0m
21:37:34.152
21:37:34.152 ,-[�[36;1;4m/vercel/path0/src/app/(public)/_components/hero.tsx�[0m:1:1]
21:37:34.152 �[2m1�[0m | import { useRouter } from 'next/navigation';
21:37:34.152 : �[35;1m ^^^^^^^^^�[0m
21:37:34.152 �[2m2�[0m |
21:37:34.152 �[2m3�[0m | import { Search } from 'lucide-react';
21:37:34.152 �[2m4�[0m | import { LanguageButton } from './language-button';
21:37:34.152 `----
21:37:34.152
21:37:34.152 Import trace for requested module:
21:37:34.152 ./src/app/(public)/_components/hero.tsx
21:37:34.152 ./src/app/(public)/page.tsx
21:37:34.152
21:37:34.152 ./src/app/(public)/_components/search-form.tsx
21:37:34.152 Error: �[31mx�[0m You're importing a component that needs `usePathname`. This React Hook only works in a Client Component. To fix, mark the file (or its parent) with the `"use client"` directive.
21:37:34.152 �[31m|�[0m
21:37:34.152 �[31m|�[0m Learn more: https://nextjs.org/docs/app/api-reference/directives/use-client
21:37:34.152 �[31m|�[0m
21:37:34.152
21:37:34.153 ,-[�[36;1;4m/vercel/path0/src/app/(public)/_components/search-form.tsx�[0m:1:1]
21:37:34.153 �[2m1�[0m | import { usePathname, useSearchParams, useRouter } from 'next/navigation';
21:37:34.153 : �[35;1m ^^^^^^^^^^^�[0m
21:37:34.153 �[2m2�[0m | import { useForm } from 'react-hook-form';
21:37:34.153 �[2m3�[0m | import { GoX } from 'react-icons/go';
21:37:34.153 `----
21:37:34.153 �[31mx�[0m You're importing a component that needs `useSearchParams`. This React Hook only works in a Client Component. To fix, mark the file (or its parent) with the `"use client"` directive.
21:37:34.153 �[31m|�[0m
21:37:34.153 �[31m|�[0m Learn more: https://nextjs.org/docs/app/api-reference/directives/use-client
21:37:34.153 �[31m|�[0m
21:37:34.153
21:37:34.153 ,-[�[36;1;4m/vercel/path0/src/app/(public)/_components/search-form.tsx�[0m:1:1]
21:37:34.154 �[2m1�[0m | import { usePathname, useSearchParams, useRouter } from 'next/navigation';
21:37:34.154 : �[35;1m ^^^^^^^^^^^^^^^�[0m
21:37:34.154 �[2m2�[0m | import { useForm } from 'react-hook-form';
21:37:34.154 �[2m3�[0m | import { GoX } from 'react-icons/go';
21:37:34.154 `----
21:37:34.154 �[31mx�[0m You're importing a component that needs `useRouter`. This React Hook only works in a Client Component. To fix, mark the file (or its parent) with the `"use client"` directive.
21:37:34.154 �[31m|�[0m
21:37:34.154 �[31m|�[0m Learn more: https://nextjs.org/docs/app/api-reference/directives/use-client
21:37:34.154 �[31m|�[0m
21:37:34.154
21:37:34.154 ,-[�[36;1;4m/vercel/path0/src/app/(public)/_components/search-form.tsx�[0m:1:1]
21:37:34.159 �[2m1�[0m | import { usePathname, useSearchParams, useRouter } from 'next/navigation';
21:37:34.159 : �[35;1m ^^^^^^^^^�[0m
21:37:34.159 �[2m2�[0m | import { useForm } from 'react-hook-form';
21:37:34.159 �[2m3�[0m | import { GoX } from 'react-icons/go';
21:37:34.159 `----
21:37:34.159
21:37:34.159 Import trace for requested module:
21:37:34.159 ./src/app/(public)/_components/search-form.tsx
21:37:34.160 ./src/app/(public)/_components/header.tsx
21:37:34.160 ./src/app/not-found.tsx
21:37:34.160
21:37:34.165
21:37:34.166 > Build failed because of webpack errors
21:37:34.198 ELIFECYCLE Command failed with exit code 1.
21:37:34.215 Error: Command "pnpm run build" exited with 1
|
@max-programming, Now there will be no issue. |
max-programming
requested changes
Oct 9, 2025
|
@max-programming, Sorry for adding the "use client" directive to the Header server component. |
max-programming
requested changes
Oct 9, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
This pull request improves the responsiveness of the repository listing page to ensure a smooth and user-friendly experience across all device sizes, especially mobile devices.
Changes Made
Motivation
The initial layout was not adjusting properly on smaller screens, resulting in overflowed text, cramped UI components, and poor usability. These changes address those issues and align with mobile-first best practices using Tailwind CSS.
close #241